<template>
  <el-form label-width="100px">
    <el-form-item label="教师名称:">
      <el-input
        v-model="form.name"
        style="width: 266px"
        maxlength="6"
        show-word-limit
        class="input"
        :class="nameStyle"
        placeholder="输入教师名称"
        @blur="validName"
      />
      <span>{{ nameTip }}</span>
    </el-form-item>
    <el-form-item label="教师头像:">
      <uploader
        :width="120"
        :height="120"
        :oss="'member'"
        :url="form.avatar"
        @callback="avatarCallback"
      />
    </el-form-item>
    <el-form-item label="账号信息:">
      <el-input
        v-model="form.account"
        style="width: 266px"
        class="input"
        disabled
      />
    </el-form-item>
    <el-form-item label="密码信息:">
      <el-checkbox
        v-model="reset"
        label="重置密码"
        @change="resetPwd"
      />
      <div v-show="reset">
        <el-input
          v-model="password"
          style="width: 150px"
          class="input"
          :class="pwdStyle"
          placeholder="输入密码"
          @blur="validPwd"
        />
        <el-button
          type="primary"
          plain
          style="margin-left: 5px"
          @click="randomPwd"
        >
          随机密码
        </el-button>
        <span>{{ pwdTip }}</span>
        <el-tag type="warning" class="tag">出于安全考虑，只能对密码进行重置操作</el-tag>
      </div>
    </el-form-item>
    <el-form-item style="margin-top: 30px">
      <el-button style="width: 100px" @click="close">取消</el-button>
      <el-button style="width: 150px" type="primary" @click="update">更新</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { validName, validPwd } from '../../../utils/validate'
import Uploader from '../../course/module/Upload'
import { updateTeacher } from '../../../api/teacher'
export default {
  name: 'TeacherDialog',
  components: { Uploader },
  props: {
    form: {
      type: Object,
      default: function() {
        return {
          id: null,
          name: null,
          avatar: null
        }
      }
    }
  },
  data() {
    return {
      reset: false,
      password: null,
      nameStyle: '',
      pwdStyle: '',
      nameTip: '',
      pwdTip: ''
    }
  },
  methods: {
    avatarCallback(url) {
      this.form.avatar = url
    },
    validName() {
      if (validName(this.form.name)) {
        this.nameStyle = 'success'
        this.nameTip = ''
        return true
      } else {
        this.nameStyle = 'danger'
        this.nameTip = '名称包含特殊字符'
        return false
      }
    },
    validPwd() {
      if (validPwd(this.password)) {
        this.pwdStyle = 'success'
        this.pwdTip = ''
        return true
      } else {
        this.pwdStyle = 'danger'
        this.pwdTip = '密码应为6-16位且不包含特殊字符'
        return false
      }
    },
    resetPwd() {
      this.pwdStyle = ''
      this.pwdTip = ''
      this.password = null
    },
    close() {
      this.reset = false
      this.$emit('close')
    },
    update() {
      if (this.validName() && (!this.reset || this.validPwd())) {
        const config = {
          name: this.form.name,
          password: this.password,
          avatar: this.form.avatar
        }
        updateTeacher(this.form.id, config).then(() => {
          this.$SUCCESS('更新教师信息成功')
          this.$close()
          this.$reload()
        }).catch(() => {
          this.$ERROR('更新教师信息成功')
        })
      }
    },
    randomPwd() {
      this.password = Math.random().toString().slice(-6)
      this.validPwd()
    }
  }
}
</script>

<style scoped>
    .tag{
        width:266px;
        display: block;
        margin-top: 10px;
        margin-left: 0;
    }
    span{
        color: #f56c6c;
        margin-left: 10px
    }
    .danger /deep/ input{
        border-color: #f56c6c;
    }
    .success  /deep/ input{
        border-color: #67c23a;
    }
</style>
